<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <li th:if="${#lists.isEmpty(courseCatalogList)}">
        <section class="no-data__wrap">
            <em>&nbsp;</em>
            <p>亲，小编正在整理中</p>
        </section>
    </li>
    <li th:if="!${#lists.isEmpty(courseCatalogList)}" th:each="catalog : ${courseCatalogList}" class="item-content">
        <div class="item-inner">
            <div class="item-title">
                <a href="javascript:void(0);"  th:attrappend="data-id=${catalog['materialId']}>0?${catalog['id']}:'',data-course=${catalog['courseId']}" class="row no-gutter show live-tree-catalog">
                    <div class="live-tree-trunk"  th:classappend="${#lists.isEmpty(catalog['datumList'])}?'col-80':'col-70'">
                        <strong class="live-menu-tree-tit" th:text="${catalog['catalogName']}"></strong>
                        <section th:if="${catalog['materialTypeKey']}=='LIVE'" class="wm-attr-wrap wm-live-attr-wrap">
                            <span class="fs4 c-888">
                                <th:block th:text="${#strings.substring(catalog['lessonStartTime'],5,7)}"></th:block>月<th:block th:text="${#strings.substring(catalog['lessonStartTime'],8,10)}"></th:block><th:block th:if="!${#strings.equals(#strings.substring(catalog['lessonStartTime'],8,10),#strings.substring(catalog['lessonEndTime'],8,10))}" th:text="${#strings.substring(catalog['lessonEndTime'],7,10)}"></th:block>日
                                <th:block th:text="${#strings.substring(catalog['lessonStartTime'],10,16)} + '-' + ${#strings.substring(catalog['lessonEndTime'],11,16)}"></th:block>
                            </span>
                            <br/>
                            <span class="fs4 c-888 vam" th:if="${catalog['progress']} != ''" th:text="${catalog['progress']}"></span>
                            <span class="fs4 c-888 vam" th:if="${catalog['progress']} == null ">0.0%</span>
                        </section>
                    </div>
                    <div th:if="!${#lists.isEmpty(catalog['datumList'])}"  class="col-10 download_datum text-right">
                        <span th:attrappend="data-catalogId=${catalog['id']}" class="icon iconfont icon-hudongpiaoicon05"></span>
                    </div>
                    <div th:if="${catalog['livePlayState']}==1" class="col-20 text-right live-play">
                        <button class="button button-fill button-round button-danger watch-live">看直播</button>
                    </div>
                    <div th:if="${catalog['livePlayState']}==2" class="col-20 text-right live-play">
                        <button class="button button-fill button-round button-success watch-live live-bespeak">未开始</button>
                    </div>
                    <div th:if="${catalog['livePlayState']}==3 and ${catalog['replay']}==1" class="col-20 text-right live-play">
                        <span class="button button-fill button-round button-success watch-live live-playback">看回放</span>
                    </div>
                    <div th:if="${catalog['livePlayState']}==3 and ${catalog['replay']} !=1" class="col-20 text-right live-play">
                        <span class="button button-fill button-round button-success watch-live live-playback">已结束</span>
                    </div>
                    <div th:if="${catalog['livePlayState']}==4" class="col-20 text-right live-play">
                        <button class="button button-fill button-round button-success watch-live live-bespeak">提前进入</button>
                    </div>
                </a>
                <section th:if="!${#lists.isEmpty(catalog['childCourseCatalogList'])}" class="course-menu-tree-childNode__wrap live-menu-tree-childNode__wrap">
                    <ul>
                        <li th:each="child,index : ${catalog['childCourseCatalogList']}" th:classappend="${child['livePlayState']}==1?'active':''" class="wp-card__wrap">
                            <a href="javascript:void(0);" th:attrappend="data-id=${child['id']},data-course=${child['courseId']}" class="row no-gutter show live-tree-catalog">
                                <div class="chapter-content" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-75':'col-70'">
                                    <div th:if="${child['livePlayState']} ==1" class="watch-live-ico watch-liveInfo-ico"></div>
                                    <div th:if="${child['livePlayState']} !=1" class="chapter-num" th:text="${#numbers.formatDecimal(index.count,2,0,'POINT')}"></div>
                                    <strong class="live-menu-tree-tit" th:text="${child['catalogName']}"></strong>
                                    <section th:if="${child['materialTypeKey']}=='LIVE'" class="wm-attr-wrap wm-live-attr-wrap">
                                        <span class="fs4 c-888">
                                            <th:block th:text="${#strings.substring(child['lessonStartTime'],5,7)}"></th:block>月<th:block th:text="${#strings.substring(child['lessonStartTime'],8,10)}"></th:block><th:block th:if="!${#strings.equals(#strings.substring(child['lessonStartTime'],8,10),#strings.substring(child['lessonEndTime'],8,10))}" th:text="${#strings.substring(child['lessonEndTime'],7,10)}"></th:block>日
                                            <th:block th:text="${#strings.substring(child['lessonStartTime'],10,16)} + '-' + ${#strings.substring(child['lessonEndTime'],11,16)}"></th:block>
                                        </span>
                                        <br/>
                                        <span class="fs4 c-888 vam" th:if="${catalog['progress']} != null" th:text="'已学'+${catalog['progress']}"></span>
                                        <span class="fs4 c-888 vam" th:if="${catalog['progress']} == null ">未学习</span>
                                    </section>
                                </div>
                                <div th:if="!${#lists.isEmpty(child['datumList'])}"  class="col-10 download_datum text-right">
                                    <span th:attrappend="data-catalogId=${child['id']}" class="icon iconfont icon-hudongpiaoicon05"></span>
                                </div>
                                <div th:if="${child['livePlayState']}==1" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-25':'col-20'" class="text-right live-play">
                                    <button class="button button-fill button-round button-danger watch-live">看直播</button>
                                </div>
                                <div th:if="${child['livePlayState']}==2" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-25':'col-20'" class="text-right live-play">
                                    <button class="button button-fill button-round button-success watch-live live-bespeak">未开始</button>
                                </div>
                                <div th:if="${child['livePlayState']}==3 and ${child['replay']}==1" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-25':'col-20'" class="text-right live-play">
                                    <span class="button button-fill button-round button-success watch-live live-playback">看回放</span>
                                </div>
                                <div th:if="${child['livePlayState']}==3 and ${child['replay']} !=1" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-25':'col-20'" class="text-right live-play">
                                    <span class="button button-fill button-round button-success watch-live live-playback">已结束</span>
                                </div>
                                <div th:if="${child['livePlayState']}==4" th:classappend="${#lists.isEmpty(child['datumList'])}?'col-25':'col-20'" class="text-right live-play">
                                    <button class="button button-fill button-round button-success watch-live live-bespeak">提前进入</button>
                                </div>
                            </a>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </li>
</html>